<template>
    <div class="container" ref="container_ref" v-if="$store.state.login_dialog">
        <header @mousedown="moveLoginDialog">
            <span>登录</span>
            <el-icon class="close" @click="closeLoginDialog">
                <close-bold />
            </el-icon>
        </header>
        <Qr v-if="$store.state.login_mode"></Qr>
        <Other v-if="!$store.state.login_mode"></Other> 
     </div>

</template>

<script>

import { ref, inject } from 'vue';
import { useStore } from "vuex";
import Qr from './Qr.vue'
import Other from './Other.vue'
export default {
    name: "Login",
    components: {
    Qr,
    Other
},
    setup() {
        const store = useStore();
        const emitter = inject('emitter');

        // 登录对话框拖拽方法
        const container_ref = ref(null);
        function moveLoginDialog(e) {
            const viewport_width = innerWidth;
            const viewport_height = innerHeight;
            const container = container_ref.value;
            const container_width =
                parseInt(getComputedStyle(container).width) / 2;
            const container_height =
                parseInt(getComputedStyle(container).height) / 2;
            const header_offset_x = e.offsetX;
            const header_offset_y = e.offsetY;
            function move(e) {
                let x = e.x + -header_offset_x + container_width;
                let y = e.y + -header_offset_y + container_height;
                if (
                    x + container_width >= viewport_width ||
                    x <= container_width
                ) {
                    x = x <= 0 ? 0 : viewport_width;
                } else {
                    container.style.left = x + "px";
                }

                if (
                    y + container_height >= viewport_height ||
                    y <= container_height
                ) {
                    y = y <= 0 ? 0 : viewport_height;
                } else {
                    container.style.top = y + "px";
                }
            }
            document.addEventListener("mousemove", move, false);
            document.addEventListener(
                "mouseup",
                () => {
                    document.removeEventListener("mousemove", move, false);
                },
                false
            );
        }
        // 关闭登录对话框
        function closeLoginDialog() {
            store.commit("MODIFY_LOGIN_DIALOG", false);
            emitter.emit('clearCheckTime');
        }

        return {
            container_ref,
            moveLoginDialog,
            closeLoginDialog
        };
    },
};
</script>

<style lang='less' scoped>
.container {
    width: 530px;
    height: 370px;
    border-radius: 5px;
    box-shadow: 0 0 5px 1px #242424;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    header {
        cursor: move;
        height: 38px;
        background-color: #242424;
        padding: 0 10px;
        color: white;
        display: flex;
        align-items: center;

        span {
            text-align: left;
            font-size: 14px;
        }
        .close {
            cursor: pointer;
            margin-left: auto;
            font-size: 16px;
        }
    }
}
</style>